<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
  <!--==================== UNICONS 图标====================-->
  <link
          rel="stylesheet"
          href="https://unicons.iconscout.com/release/v3.0.6/css/line.css"
  />
  <!--==================== SWIPER CSS ====================-->
  <link rel="stylesheet" href="assets/css/swiper-bundle.min.css"/>

  <!--==================== CSS ====================-->
  <link rel="stylesheet" href="assets/css/styles.css"/>
  <!-- iconfont font class 方式引用图标 -->
  <!-- <link
    rel="stylesheet"
    href="https://at.alicdn.com/t/c/font_3900458_82z46p85im.css"
  /> -->

  <title>welcome</title>
</head>
<body>
<!--==================== HEADER ====================-->
<header class="header scroll-header" id="header">
  <nav class="nav container">
    <a href="#" class="nav__logo">Liu Zhehao</a>

    <div class="nav__menu" id="nav-menu">
      <ul class="nav__list grid">
        <li class="nav__item">
          <a href="#home" class="nav__link">
            <i class="uil uil-estate nav__icon"></i>
            <p i18n="home">Home</p>
          </a>
        </li>
        <li class="nav__item">
          <a href="#about" class="nav__link">
            <i class="uil uil-user nav__icon"></i>
            <p i18n="about">About</p>
          </a>
        </li>
        <li class="nav__item">
          <a href="#skills" class="nav__link">
            <i class="uil uil-file-alt nav__icon"></i>
            <p i18n="skills">Skills</p>
          </a>
        </li>
        <li class="nav__item">
          <a href="#contact" class="nav__link">
            <i class="uil uil-message nav__icon"></i>
            <p i18n="contact">Contactme</p>
          </a>
        </li>
        <li class="nav__item">
          <div class="nav__link" id="translate" value="en">
            <svg class="icon nav__icon-svg" aria-hidden="true">
              <use xlink:href="#icon-fanyi"></use>
            </svg>
            <a class="=nav__link" id="nav__translate">Translate</a>
          </div>
        </li>
      </ul>
      <i class="uil uil-times nav__close" id="nav-close"></i>
    </div>

    <div class="nav__btns">
      <i class="uil uil-moon change-theme" id="theme-button"></i>
      <div class="nav__toggle" id="nav-toggle">
        <i class="uil uil-apps"></i>
      </div>
    </div>
  </nav>
</header>

<!--==================== MAIN ====================-->
<main class="main">
  <!--==================== HOME ====================-->
  <section class="home section" id="home">
    <div class="home__container container grid">
      <div class="home__content grid">
        <div class="home__social">
          <a
                  href="https://gitee.com/liu_zhehao"
                  target="_blank"
                  class="home__social-icon"
          >
            <!-- <i class="uil uil-linkedin-alt"></i> -->
            <svg
                    t="1674798484640"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2757"
            >
              <path
                      d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z"
                      fill="hsl(250deg 69% 61%)"
                      p-id="2758"
              ></path>
            </svg>
          </a>
          <a
                  href="https://github.com/554030381"
                  target="_blank"
                  class="home__social-icon"
          >
            <i class="uil uil-github-alt"></i>
          </a>
        </div>

        <div class="home__img">
          <svg
                  class="home__blob"
                  viewBox="0 0 200 187"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <mask id="mask0" mask-type="alpha">
              <path
                      d="M190.312 36.4879C206.582 62.1187 201.309 102.826 182.328 134.186C163.346 165.547
                                130.807 187.559 100.226 186.353C69.6454 185.297 41.0228 161.023 21.7403 129.362C2.45775 
                                97.8511 -7.48481 59.1033 6.67581 34.5279C20.9871 10.1032 59.7028 -0.149132 97.9666 
                                0.00163737C136.23 0.303176 174.193 10.857 190.312 36.4879Z"
              />
            </mask>
            <g mask="url(#mask0)">
              <path
                      d="M190.312 36.4879C206.582 62.1187 201.309 102.826 182.328 134.186C163.346
                                165.547 130.807 187.559 100.226 186.353C69.6454 185.297 41.0228 161.023 21.7403 
                                129.362C2.45775 97.8511 -7.48481 59.1033 6.67581 34.5279C20.9871 10.1032 59.7028 
                                -0.149132 97.9666 0.00163737C136.23 0.303176 174.193 10.857 190.312 36.4879Z"
              />
              <image
                      class="home__blob-img"
                      x="0"
                      y="-30"
                      xlink:href="assets/img/cat.png"
              />
            </g>
          </svg>
        </div>

        <div class="home__data">
          <h1 class="home__title" i18n="home__title">
            Hi, I'm
            <h1 class="home__name" i18n="home__name">Liu Zhehao</h1>
          </h1>
          <h3 class="home__subtitle" i18n="home__subtitle">
            Software developer
          </h3>
          <p class="home__description" i18n="home__description">
            High level experience in web design and development knowledge,
            producing quality work.
          </p>
          <a href="#contact" class="button button-flex">
            <span i18n="home__contact">Contact Me</span>
            <i class="uil uil-message button__icon"></i>
          </a>
        </div>
      </div>
      <div class="home__scroll">
        <a href="#about" class="home__scroll-button button--flex">
          <i class="uil uil-mouse-alt-2 home__scroll-mouse"></i>
          <span class="home__scroll-name" i18n="home__scroll-name"
          >Scroll down</span
          >
          <i class="uil uil-arrow-down home__scroll-arrow"></i>
        </a>
      </div>
    </div>
  </section>

  <!--==================== ABOUT ====================-->
  <section class="about section" id="about">
    <h2 class="section__title" i18n="about__title">About Me</h2>
    <span class="section__subtitle" i18n="about__subtitle"
    >My introduction</span
    >
    <div class="about__container container grid">
      <img src="assets/img/about.png" alt="" class="about__img"/>

      <div class="about__data">
        <p class="about__description" i18n="about__description">
          Web developer, with extensive knowledge and years of experience,
          working in web technologies and Ui / Ux design, delivering quality
          work.
        </p>

        <div class="about__info">
          <div>
            <span class="about__info-title">00+</span>
            <span class="about__info-name" i18n="about__info-name1"
            >Years of <br/>
                  experience</span
            >
          </div>

          <div>
            <span class="about__info-title">00+</span>
            <span class="about__info-name" i18n="about__info-name2"
            >Completed <br/>
                  projects</span
            >
          </div>

          <div>
            <span class="about__info-title">00+</span>
            <span class="about__info-name" i18n="about__info-name3"
            >Companies <br/>
                  worked</span
            >
          </div>
        </div>

<!--        <div class="about__buttons">-->
<!--          <a-->
<!--                  download=""-->
<!--                  href="assets/pdf/简历.pdf"-->
<!--                  class="button button&#45;&#45;flex"-->
<!--          >-->
<!--                <span i18n="download">Download CV</span-->
<!--                ><i class="uil uil-download-alt button__icon"></i>-->
<!--          </a>-->
<!--        </div>-->
      </div>
    </div>
  </section>

  <!--==================== SKILLS ====================-->
  <section class="skills section" id="skills">
    <h2 class="section__title" i18n="section__title">Skills</h2>
    <span class="section__subtitle" i18n="section__subtitle"
    >My technical level</span
    >

    <div class="skills__container container grid">
      <div>
        <!--==================== SKILLS 1 ====================-->
        <div class="skills__content skills__open">
          <div class="skills__header">
            <i class="uil uil-brackets-curly skills__icon"></i>

            <div>
              <h1 class="skills__title" i18n="skills__title">
                Frontend developer
              </h1>
              <span class="skills__subtitle" i18n="skills__years"
              >More than * years</span
              >
            </div>

            <i class="uil uil-angle-down skills__arrow"></i>
          </div>

          <div class="skills__list grid">
            <div class="skills__data">
              <div class="skills__titles">
                <h3 class="skills__name">HTML</h3>
                <span class="skills__number">60%</span>
              </div>
              <div class="skills__bar">
                <div class="skills__percentage skills__html"
                     style="--skills__html__percentage: 60%"></div>
              </div>
            </div>

            <div class="skills__data">
              <div class="skills__titles">
                <h3 class="skills__name">CSS</h3>
                <span class="skills__number">50%</span>
              </div>
              <div class="skills__bar">
                <div class="skills__percentage skills__css"
                     style="--skills__css__percentage: 50%"></div>
              </div>
            </div>

            <div class="skills__data">
              <div class="skills__titles">
                <h3 class="skills__name">JavaScript</h3>
                <span class="skills__number">60%</span>
              </div>
              <div class="skills__bar">
                <div class="skills__percentage skills__js"
                     style="--skills__js__percentage: 60%"></div>
              </div>
            </div>

            <div class="skills__data">
              <div class="skills__titles">
                <h3 class="skills__name">TypeScript</h3>
                <span class="skills__number">10%</span>
              </div>
              <div class="skills__bar">
                <div class="skills__percentage skills__ts"
                     style="--skills__ts__percentage: 10%"></div>
              </div>
            </div>

            <div class="skills__data">
              <div class="skills__titles">
                <h3 class="skills__name">VUE</h3>
                <span class="skills__number">70%</span>
              </div>
              <div class="skills__bar">
                <div class="skills__percentage skills__vue"
                     style="--skills__vue__percentage: 70%"></div>
              </div>
            </div>
          </div>
        </div>
        <!--==================== SKILLS 2 ====================-->
        <div class="skills__content skills__close">
          <div class="skills__header">
            <i class="uil uil-server-network skills__icon"></i>

            <div>
              <h1 class="skills__title" i18n="skills__title2">
                Backend developer
              </h1>
              <span class="skills__subtitle" i18n="skills__years2"
              >More than * years</span
              >
            </div>

            <i class="uil uil-angle-down skills__arrow"></i>
          </div>

          <div class="skills__list grid">
            <div class="skills__data">
              <div class="skills__titles">
                <h3 class="skills__name">Java</h3>
                <span class="skills__number">20%</span>
              </div>
              <div class="skills__bar">
                <div class="skills__percentage skills__java"
                     style="--skills__java__percentage: 20%"></div>
              </div>
            </div>

            <div class="skills__data">
              <div class="skills__titles">
                <h3 class="skills__name">Python</h3>
                <span class="skills__number">60%</span>
              </div>
              <div class="skills__bar">
                <div class="skills__percentage skills__python"
                     style="--skills__python__percentage: 60%"></div>
              </div>
            </div>

            <div class="skills__data">
              <div class="skills__titles">
                <h3 class="skills__name">Django</h3>
                <span class="skills__number">40%</span>
              </div>
              <div class="skills__bar">
                <div class="skills__percentage skills__django"
                     style="--skills__django__percentage: 40%"></div>
              </div>
            </div>

            <div class="skills__data">
              <div class="skills__titles">
                <h3 class="skills__name">Spring</h3>
                <span class="skills__number">10%</span>
              </div>
              <div class="skills__bar">
                <div class="skills__percentage skills__spring"
                     style="--skills__spring__percentage: 10%"></div>
              </div>
            </div>
          </div>
        </div>

        <!--==================== SKILLS 3 ====================-->
        <div class="skills__content skills__close">
          <div class="skills__header">
            <i class="uil uil-processor skills__icon"></i>

            <div>
              <h1 class="skills__title" i18n="skills__title3">
                Embedded developer
              </h1>
              <span class="skills__subtitle" i18n="skills__years3"
              >More than * years</span
              >
            </div>

            <i class="uil uil-angle-down skills__arrow"></i>
          </div>

          <div class="skills__list grid">
            <div class="skills__data">
              <div class="skills__titles">
                <h3 class="skills__name">STM32</h3>
                <span class="skills__number">70%</span>
              </div>
              <div class="skills__bar">
                <div class="skills__percentage skills__stm32"
                     style="--skills__stm32__percentage: 70%"></div>
              </div>
            </div>

            <div class="skills__data">
              <div class="skills__titles">
                <h3 class="skills__name">Arduino</h3>
                <span class="skills__number">50%</span>
              </div>
              <div class="skills__bar">
                <div class="skills__percentage skills__arduino"
                     style="--skills__arduino__percentage: 50%"></div>
              </div>
            </div>
            <div class="skills__data">
              <div class="skills__titles">
                <h3 class="skills__name">PCB</h3>
                <span class="skills__number">10%</span>
              </div>
              <div class="skills__bar">
                <div class="skills__percentage skills__pcb"
                     style="--skills__pcb__percentage: 10%"></div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!--==================== QUALIFICATION ====================-->
  <section class="qualification section">
    <h2 class="section__title" i18n="qualification__title">
      Qualification
    </h2>
    <span class="section__subtitle" i18n="qualification__subtitle"
    >My personal journey</span
    >
    <div class="qualification__container container">
      <div class="qualification__tabs">
        <div
                class="qualification__button button--flex qualification__active"
                data-target="#education"
        >
          <i class="uil uil-graduation-cap qualification__icon"></i>
          <span i18n="education">Education</span>
        </div>

<!--        <div class="qualification__button button&#45;&#45;flex" data-target="#work">-->
<!--          <i class="uil uil-briefcase-alt qualification__icon"></i>-->
<!--          <span i18n="work">Work</span>-->
<!--        </div>-->
      </div>
      <div class="qualification__sections">
        <!--==================== QUALIFICATION CONTENT 1 ====================-->
        <div
                class="qualification__content qualification__active"
                data-content
                id="education"
        >
          <!--==================== QUALIFICATION 1 ====================-->
          <div class="qualification__data">
            <div>
              <h3 class="qualification__title" i18n="qualification1__title">
                Electrical Engineering and Automation
              </h3>
              <span
                      class="qualification__subtitle"
                      i18n="qualification1__subtitle"
              >Ningbo University</span
              >
              <div class="qualification__calendar">
                <i class="uil uil-calendar-alt"></i>
                2019 - 2023
              </div>
            </div>

            <div>
              <span class="qualification__rounder"></span>
<!--              <span class="qualification__line"></span>-->
            </div>
          </div>
        </div>
        <!--==================== QUALIFICATION CONTENT 2 ====================-->
        <div class="qualification__content" data-content id="work">
          <!--==================== QUALIFICATION 1 ====================-->
          <div class="qualification__data">
            <div></div>
            <div>
              <span class="qualification__rounder"></span>
              <!-- <span class="qualification__line"></span> -->
            </div>
            <div>
              <h3 class="qualification__title" i18n="qualification4__title">
                Software Enginner
              </h3>
              <span
                      class="qualification__subtitle"
                      i18n="qualification4__subtitle"
              >ShenZhen</span
              >
              <div class="qualification__calendar">
                <i class="uil uil-calendar-alt"></i>
                2022
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!--==================== PORTFOLIO ====================-->
<!--  <section class="portfolio section" id="portfolio">-->
<!--    <h2 class="section__title" i18n="portfolio__title">Portfolio</h2>-->
<!--    <span class="section__subtitle" i18n="portfolio__subtitle"-->
<!--    >Most recent works</span-->
<!--    >-->

<!--    <div class="portfolio__container container swiper-container">-->
<!--      <div class="swiper-wrapper">-->
<!--        &lt;!&ndash;==================== PORTFOLIO 1 ====================&ndash;&gt;-->

<!--        <div class="portfolio__content grid swiper-slide">-->
<!--          <img-->
<!--                  src="assets/img/portfolio1.jpg"-->
<!--                  alt=""-->
<!--                  class="portfolio__img"-->
<!--          />-->

<!--          <div class="portfolio_">-->
<!--            <h3 class="portfolio__title" i18n="portfolio1__title">-->
<!--              Modern Website-->
<!--            </h3>-->
<!--            <p-->
<!--                    class="portfolio__description"-->
<!--                    i18n="portfolio1__description"-->
<!--            >-->
<!--              Website adaptable to all devices, with ui components and-->
<!--              animated interactions.-->
<!--            </p>-->
<!--            <a-->
<!--                    href="https://gitee.com/asoutherncat/"-->
<!--                    target="_blank"-->
<!--                    class="button button&#45;&#45;flex button&#45;&#45;small portfolio__button"-->
<!--            >-->
<!--              Demo-->
<!--              <i class="uil uil-arrow-right button__icon"></i>-->
<!--            </a>-->
<!--          </div>-->
<!--        </div>-->

<!--        &lt;!&ndash;==================== PORTFOLIO 2 ====================&ndash;&gt;-->

<!--        <div class="portfolio__content grid swiper-slide">-->
<!--          <img-->
<!--                  src="assets/img/portfolio2.jpg"-->
<!--                  alt=""-->
<!--                  class="portfolio__img"-->
<!--          />-->

<!--          <div class="portfolio_">-->
<!--            <h3 class="portfolio__title" i18n="portfolio2__title">-->
<!--              Modern Website-->
<!--            </h3>-->
<!--            <p-->
<!--                    class="portfolio__description"-->
<!--                    i18n="portfolio2__description"-->
<!--            >-->
<!--              Website adaptable to all devices, with ui components and-->
<!--              animated interactions.-->
<!--            </p>-->
<!--            <a-->
<!--                    href="https://gitee.com/asoutherncat/"-->
<!--                    target="_blank"-->
<!--                    class="button button&#45;&#45;flex button&#45;&#45;small portfolio__button"-->
<!--            >-->
<!--              Demo-->
<!--              <i class="uil uil-arrow-right button__icon"></i>-->
<!--            </a>-->
<!--          </div>-->
<!--        </div>-->

<!--        &lt;!&ndash;==================== PORTFOLIO 3 ====================&ndash;&gt;-->

<!--        <div class="portfolio__content grid swiper-slide">-->
<!--          <img-->
<!--                  src="assets/img/portfolio3.jpg"-->
<!--                  alt=""-->
<!--                  class="portfolio__img"-->
<!--          />-->

<!--          <div class="portfolio_">-->
<!--            <h3 class="portfolio__title" i18n="portfolio3__title">-->
<!--              Modern Website-->
<!--            </h3>-->
<!--            <p-->
<!--                    class="portfolio__description"-->
<!--                    i18n="portfolio3__description"-->
<!--            >-->
<!--              Website adaptable to all devices, with ui components and-->
<!--              animated interactions.-->
<!--            </p>-->
<!--            <a-->
<!--                    href="https://gitee.com/asoutherncat/"-->
<!--                    target="_blank"-->
<!--                    class="button button&#45;&#45;flex button&#45;&#45;small portfolio__button"-->
<!--            >-->
<!--              Demo-->
<!--              <i class="uil uil-arrow-right button__icon"></i>-->
<!--            </a>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      &lt;!&ndash; add arrows&ndash;&gt;-->
<!--      <div class="swiper-button-next">-->
<!--        <i class="uil uil-angle-right-b swiper-portfolio-icon"></i>-->
<!--      </div>-->

<!--      <div class="swiper-button-prev">-->
<!--        <i class="uil uil-angle-left-b swiper-portfolio-icon"></i>-->
<!--      </div>-->

<!--      &lt;!&ndash; Add Pagination &ndash;&gt;-->
<!--      <div class="swiper-pagination"></div>-->
<!--    </div>-->
<!--  </section>-->

  <!--==================== CONTACT ME ====================-->
  <section class="contact section" id="contact">
    <h2 class="section__title" i18n="contact__title">Contact me</h2>
    <span class="section__subtitle" i18n="contact__subtitle"
    >Get in touch</span
    >

    <div class="contact__container container grid">
      <div>
        <div class="contact__information">
          <i class="uil uil-comments contact__icon"></i>

          <div>
            <h3 class="contact__title" i18n="wechat">Call me</h3>
            <span class="contact__subtitle" i18n="wechat__number"
            >166********</span
            >
          </div>
        </div>

        <div class="contact__information">
          <i class="uil uil-user contact__icon"></i>

          <div>
            <h3 class="contact__title" i18n="qq">Call me</h3>
            <span class="contact__subtitle" i18n="qq__number"
            >554030381</span
            >
          </div>
        </div>

        <div class="contact__information">
          <i class="uil uil-envelope contact__icon"></i>

          <div>
            <h3 class="contact__title" i18n="email">E-mail</h3>
            <span class="contact__subtitle" i18n="email__address"
            >asoutherncat@gmail.com</span
            >
          </div>
        </div>

        <div class="contact__information">
          <i class="uil uil-map-marker contact__icon"></i>

          <div>
            <h3 class="contact__title" i18n="location">Location</h3>
            <span class="contact__subtitle" i18n="location__detail"
            >HuNan , CHN</span
            >
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<!--==================== FOOTER ====================-->
<footer class="footer">
  <div class="footer__bg">
    <div class="footer__container container grid">
      <div>
        <h1 class="footer__title" i18n="home__name">Liu Zhehao</h1>
        <span class="footer__subtitle" i18n="home__subtitle">Frontend developer</span>
      </div>

      <div class="footer__socials">
        <a href="https://gitee.com/liu_zhehao" target="_blank">
          <svg class="icon footer__social" aria-hidden="true">
            <use xlink:href="#icon-gitee"></use>
          </svg>
        </a>
        <a href="https://github.com/554030381" target="_blank">
          <svg class="icon footer__social" aria-hidden="true">
            <use xlink:href="#icon-github"></use>
          </svg>
        </a>
      </div>
    </div>

    <p class="footer__copy">
      <a
              class="footer__copy"
              href="https://beian.miit.gov.cn"
              target="_blank"
      >&#169; 浙ICP备2021000578号-1</a>
    </p>
  </div>
</footer>

<!--==================== SCROLL TOP ====================-->
<a href="#" class="scrollup" id="scroll-up">
  <i class="uil uil-arrow-up scrollup__icon"></i>
</a>
<!--==================== SWIPER JS ====================-->
<script src="assets/js/swiper-bundle.min.js"></script>

<!-- iconfont JS -->
<script src="assets/js/iconfont.js"></script>
<!-- jquery -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="assets/js/jquery.i18n.min.js"></script>
<!--==================== MAIN JS ====================-->
<script src="assets/js/main.js"></script>

<!-- translate JS -->
<script src="assets/js/cn-en-translate.js"></script>
</body>
</html>
